<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>基本信息</div>
        </div>
      </div>

      <Form
        ref="formValidate"
        :model="params"
        :rules="ruleValidate"
        :label-width="130"
      >
        <FormItem label="商品分类" prop="mallName">
          <Select v-model="params.fenlei1" size="small" style="width:100px">
            <Option
              v-for="item in fenlei1List"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select v-model="params.fenlei2" size="small" style="width:100px">
            <Option
              v-for="item in fenlei2List"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select v-model="params.fenlei3" size="small" style="width:100px">
            <Option
              v-for="item in fenlei3List"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>

        <FormItem label="商品类型" prop="address">
          <RadioGroup v-model="params.address">
            <Radio label="团购"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="商品名称" prop="address">
          <Input
            v-model="params.mallName"
            placeholder="请输入商品名称"
            style="width: 300px"
            size="small"
          ></Input>
        </FormItem>
        <FormItem label="商品图片" prop="hidPic">
          <div class="j-img-echo" style="width: 300px">
            <template v-if="params.hidPic">
              <img :src="params.hidPic" />
            </template>
          </div>
          <Upload
            :action="action"
            :headers="headers"
            :show-upload-list="false"
            name="file"
            :on-success="uploadHidpicSuccess"
          >
            <Button icon="ios-cloud-upload-outline" style="width:300px"
              >上传商品图片</Button
            >
          </Upload>
          <!-- <Alert show-icon closable style="margin-top:10px">建议上传1010*404尺寸并且大小不能大于500kb的图片</Alert> -->
        </FormItem>
        <FormItem label="背景图片" prop="backImg">
          <div class="j-img-echo" style="width: 300px">
            <template v-if="!params.backImg">
              <Icon type="md-images" size="55" color="#c5c8ce" />
            </template>
            <template v-else>
              <img :src="params.backImg" />
            </template>
          </div>
          <Upload
            :action="action"
            :headers="headers"
            :show-upload-list="false"
            name="file"
            :on-success="uploadBackImgSuccess"
          >
            <Button icon="ios-cloud-upload-outline" style="width:300px"
              >上传背景图片</Button
            >
          </Upload>
          <!-- <Alert show-icon closable style="margin-top:10px">建议上传1010*404尺寸并且大小不能大于500kb的图片</Alert> -->
        </FormItem>

        <FormItem label="">
          <Button
            type="primary"
            style="width: 88px"
            @click="handleSubmit('formValidate')"
            >保存</Button
          >
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import hsBreadcrumb from "@/components/hs-breadcrumb";

export default {
  data() {
    return {
      action: this.$uploadURL,
      headers: {
        token: JSON.parse(sessionStorage.getItem("J-TOKEN")).token,
      },
      // 参数
      params: {
        mallId: "",
        mallName: "",
        backImg: "",
        address: "",
        hidPic: "",
        fenlei1: "生活服务",
        fenlei2: "鲜花店",
        fenlei3: "鲜花店",
      },
      fenlei1List: [
        {
          label: "生活服务",
          value: "生活服务",
        },
      ],
      fenlei2List: [
        {
          label: "鲜花店",
          value: "鲜花店",
        },
      ],
      fenlei3List: [
        {
          label: "鲜花店",
          value: "鲜花店",
        },
      ],
      ruleValidate: {
        mallName: [
          { required: true, message: "商户名称不能为空", trigger: "change" },
        ],
        address: [
          { required: true, message: "商户地址不能为空", trigger: "change" },
        ],
      },
      // 面包屑
      breadcrumb: [
        { name: "首页", url: "", icon: "ios-home-outline", size: 18 },
        { name: "商城", url: "", icon: "", size: 0 },
        { name: "快手团购配置", url: "", icon: "", size: 0 },
      ],
    };
  },
  created() {
    // 查询商户信息
    this.getMallInfo();
  },
  methods: {
    // 点击提交验证
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 保存商户信息
          this.udateMall();
        }
      });
    },
    // 查询商户信息
    getMallInfo() {
      this.axios.post("/mall/getMall").then((res) => {
        console.log(res);
        if (res.status == 200) {
          if (res.data) {
            this.params = Object.assign({}, this.params, res.data);
          }
        }
        if (res.status == 201) {
          this.$Message.error(res.msg);
        }
        if (res.status == 500) {
          this.$Notice.error({
            title: "服务器内部错误",
            desc: "查询商户信息接口报错",
            duration: 0,
          });
        }
      });
    },
    // 保存商户信息
    udateMall() {
      // 询问是否保存
      this.$Modal.confirm({
        title: `是否保存商户信息？`,
        onOk: () => {
          this.axios.post("/mall/update", this.params).then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.$Message.success("操作成功.");
            }
            if (res.status == 201) {
              this.$Message.error(res.msg);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: "服务器内部错误",
                desc: "保存商户信息接口报错",
                duration: 0,
              });
            }
          });
        },
        onCancel: () => {
          this.$Message.info("您点击了取消.");
        },
      });
    },
    // 上传成功
    uploadBackImgSuccess(response, file, fileList) {
      if (response.status == 200) {
        this.params.backImg = response.data;
      }
      if (response.status == 201) {
        this.$Message.error(response.msg);
      }
      if (response.status == 500) {
        this.$Notice.error({
          title: "服务器内部错误",
          desc: "上传背景图片接口报错",
          duration: 0,
        });
      }
    },
    // 上传成功
    uploadHidpicSuccess(response, file, fileList) {
      if (response.status == 200) {
        this.params.hidPic = response.data;
      }
      if (response.status == 201) {
        this.$Message.error(response.msg);
      }
      if (response.status == 500) {
        this.$Notice.error({
          title: "服务器内部错误",
          desc: "上传头像接口报错",
          duration: 0,
        });
      }
    },
  },
  components: {
    hsBreadcrumb,
  },
};
</script>

<style scoped></style>
